<template>
  <view class="Border">
    <!-- 单词渲染部分 -->
    <view class="word ">
      <view class="wordLeft" @click="audio">

        <text>{{currentWord.word}} </text>
        <!-- 喇叭UI部分能找到免费音标接口再优化 -->
        <span class="iconfont horn" style="font-size:50rpx; ">&#xe6fd;</span>
        <text>{{currentWord.translation}}</text>
      </view>
      <view @click="collectionStatus">
        <!-- 未收藏 -->
        <span v-if="!currentWord.collection" class="iconfont star" style="font-size: 100rpx; ">&#xe661;</span>
        <!-- 已收藏 -->
        <span v-else class="iconfont star" style="font-size: 100rpx; ">&#xe662;</span>
      </view>
    </view>
    <!-- 下滑线 -->
    <view class="divider" />

    <!-- 释义部分 -->
    <view class=" interpretation">
      <p>
        <span>【详细释义】</span>
        <span @click="hide">{{none?'一直隐藏释义':'一直显示释义'}}</span>
      </p>
      <textarea v-if="none" v-model="currentWord.paraphrase" readonly>

      </textarea>
    </view>

    <!-- 选择按钮事件 -->
    <view class="choose ">
      <view class="chooseflex">
        <u-button type="primary" shape="circle" @click="last" size="small" text="上一个"></u-button>
        <u-button type="warning" shape="circle" size="small" text="已掌握"></u-button>
        <u-button type="success" shape="circle" @click="next" size="small" text="下一个"></u-button>
      </view>
         <!-- 单词的滑动选择器 -->
      <van-slider bar-height="8rpx" min="1" :max="words.length" v-model="slider" @change="change" use-button-slot>
        <view class="custom-button" slot="button">{{slider+'/'+words.length}}</view>
      </van-slider>


    </view>
 




  </view>

</template>

<script>
  export default {
    data() {
      return {
        id: null, //当前单词本id
        words: [], //单词本所有数据
        currentWord: [], //当前单词数据
        aa: '213           213',
        slider: 1, //单词滑动选择器
        none: true, //隐藏释义
      };
    },

    watch: {
      // 侦听单词滑动选择器,来更新当前单词数据
      slider: function(val) {
        this.currentWord = this.words[this.slider - 1]
      }
    },
    methods: {
      // 获取单词数据
      async getBooks() {
        let id = {
          id: this.id
        }
        const res = await uni.$myRequest('/home/word/getWord', 'GET', id)
        this.words = res.data.data
        console.log(this.words, 'this.words')
      },
      // 单词翻译音标 (暂时弃用)
      // async phoneticSymbol() {
      //   const res = await
      // }
      // 单词发音事件
      audio(word) {
        // main.js文件中把音频实例保存为全局变量
        this.$audio.src = 'http://dict.youdao.com/dictvoice?audio=' + this.currentWord.word
        this.$audio.play()
      },
      // 收藏状态事件
      async collectionStatus() {
        this.currentWord.collection = this.currentWord.collection ? 0 : 1
        let id = {
          id: this.currentWord.id
        }
        const res = await uni.$myRequest('/home/word/markWords', 'POST', id)
        this.getBooks()
      },
      // 隐藏释义事件
      hide() {
        this.none = !this.none
      },
      // 滑块值改变事件
      change(event) {
        this.slider = event.detail
      },
      // 上一个
      last(event) {
        if (this.slider !== 1) {
          this.slider = this.slider - 1
          // 阻止当前的发音
          this.$audio.stop()
        } else {
          uni.showToast({
            title: '这是第一个',
            icon: "error",
            duration: 1000
          })
        }
      },
      // 下一个
      next() {
        if (this.slider !== this.words.length) {
          this.slider = this.slider + 1
          // 阻止当前的发音
          this.$audio.stop()
        } else {
          uni.showToast({
            title: '这是最后一个',
            icon: "error",
            duration: 1000
          })
        }

      }
    },
    mounted() {
      this.currentWord = this.words[0]
    },
    onLoad(options) {
      // 单词本id赋值
      this.id = options.id
      this.getBooks()
    }
  }
</script>

<style lang="scss" scoped>
  .Border {
    height: 100vh;
    margin: 0 20rpx;
    padding: 20rpx;
    border: 1rpx solid #d5d5d5;
    border-radius: 8px;
  }



  .divider {
    background: #E0E3DA;
    width: 100%;
    height: 1rpx;
  }

  .word {
    height: 250rpx;
    display: flex;
    justify-content: space-between;

    .wordLeft {
      
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: flex-start;
      text:nth-child(1) {
        font-weight: 700;
        font-size: 50rpx;
      }
    }

    .star {
      line-height: 250rpx;
      font-size: 100rpx
    }
  }

  .interpretation {
    margin-top: 20rpx;

    p {
      width: 100%;
      display: flex;
      justify-content: space-between;

      span:nth-child(1) {
        font-weight: 700;
      }

      span:nth-child(2) {
        font-weight: 700;
        color: #39a9ed;
        font-size: 26rpx;
        padding: 6rpx;
        line-height: 100%;
        border: 1.5px solid #39a9ed;
        border-radius: 25px;
      }
    }

    textarea {
      width: 100%;
      height: 500rpx;
      padding: 5rpx;
      margin-top: 10rpx;
      border: 1px solid #d5d5d5;
      ;
      border-left: none;
      border-right: none;
    }
  }

  .choose {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50rpx;
    width: calc(90% - 40rpx);

    .chooseflex {
      display: flex;
      width: calc(100% - 40rpx); //加减符号两边要加空格，否则会无效
      margin-bottom: 20rpx;

      /deep/ .u-button--small {
        width: 180rpx;
      }
    }
  }

  .slider {
    width: calc(100% - 80rpx);
  }



  .custom-button {
    padding: 0 8rpx;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: #f9ae3d;
    border-radius: 100px;

  }
</style>
